<template>
  <el-form
    
    ref="ruleForm"
    label-width="80px"
    class="demo-ruleForm"
    :model="form"
    :rules="rules"
  >
    <el-form-item label="商品名称" style="width: 300px" prop="name">
      <el-input v-model="form.name" placeholder="请输入商品名"></el-input>
    </el-form-item>

    <el-form-item label="商品分类" style="width: 300px" prop="category">
      <el-select v-model="form.category">
        <el-option
          v-for="item in cateList"
          :key="item.id"
          :label="item.cateName"
          :value="item.cateName"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="商品价格" prop="price">
      <el-input-number v-model="form.price"></el-input-number>
    </el-form-item>
    <el-form-item label="商品图片" prop="imgUrl">
      <el-upload
        action="http://1.15.179.44:3001/goods/goods_img_upload"
        :show-file-list="false"
        :on-success="success"
      >
        <img
          v-if="form.imgUrl"
          :src="
            'http://1.15.179.44:3001' + '/upload/imgs/goods_img/' + form.imgUrl
          "
          alt=""
          srcset=""
        />
        <i v-else style="font-size: 50px" class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>

    <el-form-item label="描述" style="width: 300px" prop="goodsDesc">
      <el-input v-model="form.goodsDesc"> </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="clickBtn"
        >{{ type === "add" ? "添加" : "编辑" }}商品</el-button
      >
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { catelistRrq } from "@/api/goods.api";
export default {
  props: {
    type: {
      type: String,
      default: "add",
    },
    defaultForm: {
      type: Object,
      default: () => ({}),
    },
  },

  data() {
    return {
      cateList: [],
      form: {
        name: "",
        category: "",
        price: "",
        imgUrl: "",
        goodsDesc: "",
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        category: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        imgUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
        goodsDesc: [{ required: true, message: "请输入描述", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 添加商品的点击事件
    clickBtn() {
      // 验证
      this.$refs.ruleForm.validate(async (res) => {
        if (res) {
          // console.log('发送axios');
          // const res = await goodsAddReq(this.form);
          //   console.log(res);
          //   this.$emit("success", this.form);

          //   if (res.data.code === 0) {
          //     this.$message.success("添加商品成功");
          //     this.$router.push("/goods/list");
          //   }
          this.$emit("success", this.form);
        } else {
          // 表单校验失败了
        }
      });
    },

// 商品图片上传成功
    success(res) {
      console.log(res);
      let imgUrl = res.imgUrl.split("/").pop();
      this.form.imgUrl = imgUrl;
      // 手动触发一次校验（只校验imgUrl）
      this.$refs.form.validateField("imgUrl");
    },

    // 重置
    reset() {
      this.$refs.ruleForm.resetFields();
    },
  },
  // 进入页面请求接口   // created只执行一次，
  async created() {
    const res = await catelistRrq();
    console.log(res);
    this.cateList = res.data.data;

    // 拿到了defaultForm里的数据
    if (this.type === "edit") {
      this.form = { ...this.defaultForm };
    }
  },
  watch: {
    defaultForm: {
      handler: function () {
        if (this.type === "edit") {
          this.form = { ...this.defaultForm };
          // 对于图片我们需要特殊处理一下，只取文件名
          this.form.imgUrl = this.defaultForm.imgUrl.split("/").pop();
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>